<template>
  <div v-show="info">
    <van-nav-bar
      :title="info.community"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <van-swipe class="my-swipe" :autoplay="5000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in info.houseImg" :key="index">
        <van-image :src="url + item" height="250"
      /></van-swipe-item>
    </van-swipe>
    <div class="detail-info">
      <div class="info-top">
        <h3>{{ info.title }}</h3>
        <p class="distance">{{ info.tags[0] }}</p>
      </div>
      <div class="info-content">
        <ul>
          <li>
            <p class="info-price">{{ info.price }} <span>/月</span></p>
            <p>租金</p>
          </li>
          <li>
            <p class="info-price">{{ info.roomType }}</p>
            <p>房型</p>
          </li>
          <li>
            <p class="info-price">{{ info.size }}平米</p>
            <p>面积</p>
          </li>
        </ul>
      </div>
      <div class="info-bottom">
        <div>装修：<span>精装</span></div>
        <div>
          朝向：<span>{{ info.oriented[0] }}</span>
        </div>
        <div>
          楼层：<span>{{ info.floor }}</span>
        </div>
        <div>类型：<span>普通住宅</span></div>
      </div>
    </div>
    <div class="detail-box">
      <div class="detail-desc">
        <div class="desc-title">小区：<span>天山星城</span></div>
        <div class="detail-map">
          <Map></Map>
        </div>
        <div class="desc-title titles">房源配套</div>
        <van-grid
          clickable
          :column-num="5"
          :border="false"
          class="grids"
          icon-size="23px"
        >
          <van-grid-item v-for="value in info.supporting" :key="value">
            <van-icon
              class="iconfont"
              class-prefix="icon"
              size="23"
              color="#333"
              :name="icons[value]"
            />
            <p>{{ value }}</p>
          </van-grid-item>
        </van-grid>
      </div>
    </div>
    <div class="detail-serv">
      <div class="desc-title titles">房源概况</div>
      <van-cell class="detail-cell">
        <template #title>
          <div class="head">
            <img src="http://liufusong.top:8080/img/avatar.png" alt="" />
            <div class="con">
              <p class="title van-ellipsis">王女士</p>
              <div>
                <van-icon
                  class="iconfont"
                  class-prefix="icon"
                  name="renzheng"
                  size="17"
                />已认证房东
              </div>
            </div>
          </div>
        </template>
        <template #default>
          <van-button plain hairline type="primary" class="btn"
            >发消息</van-button
          >
        </template>
      </van-cell>
      <div class="detail-text">
        <div>
          1.周边配套齐全，地铁四号线陶然亭站，交通便利，公交云集，距离北京南站、西站都很近距离。
          2.小区规模大，配套全年，幼儿园，体育场，游泳馆，养老院，小学。
          3.人车分流，环境优美。
          4.精装两居室，居家生活方便，还有一个小书房，看房随时联系。
          <!-- {{ info.description }} -->
        </div>
      </div>
    </div>
    <div class="bgc"></div>
    <div class="detail-like">
      <div class="desc-title">猜你喜欢</div>
      <div class="findList">
        <ul>
          <li>
            <div class="imgs">
              <img src="http://liufusong.top:8080/img/message/1.png" alt="" />
            </div>
            <div class="list-content">
              <h3>安贞西里 3室1厅</h3>
              <p class="adress">72.32㎡/南 北/低楼层</p>
              <p class="distance">随时看房</p>
              <div class="housePrice"><span>4500</span>元/月</div>
            </div>
          </li>
          <li>
            <div class="imgs">
              <img src="http://liufusong.top:8080/img/message/2.png" alt="" />
            </div>
            <div class="list-content">
              <h3>天居园 2室1厅</h3>
              <p class="adress">83㎡/南/高楼层</p>
              <p class="distance">近地铁</p>
              <div class="housePrice"><span>7200</span>元/月</div>
            </div>
          </li>
          <li class="list-border">
            <div class="imgs">
              <img src="http://liufusong.top:8080/img/message/3.png" alt="" />
            </div>
            <div class="list-content">
              <h3>角门甲4号院 1室1厅</h3>
              <p class="adress">52㎡/西南/低楼层</p>
              <p class="distance">集中供暖</p>
              <div class="housePrice"><span>4300</span>元/月</div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="bottom-serc">
      <div class="bottom-sc stars" @click="toggleCollect">
        <van-image
          v-if="flag === false"
          width="16"
          height="16"
          src="http://liufusong.top:8080/img/unstar.png"
        />
        <van-image
          v-else
          width="16"
          height="16"
          src="http://liufusong.top:8080/img/star.png"
        />
        <p>收藏</p>
      </div>
      <div class="bottom-sc">在线咨询</div>
      <div class="bottom-sc tels">电话预约</div>
    </div>
  </div>
</template>

<script>
import { houseInfo } from '@/api/house'
import { getDetailCollect, getCollect, delCollect } from '@/api/user'
import Map from '@/components/map/map.vue'
export default {
  name: 'DetailPage',
  components: {
    Map
  },
  data () {
    return {
      url: 'http://liufusong.top:8080',
      info: '',
      flag: '',
      icons: {
        衣柜: 'yigui-hui',
        洗衣机: 'xiyiji',
        空调: 'kongdiao',
        天然气: 'tianranqi',
        冰箱: 'bingxiang',
        暖气: 'nuanqi',
        电视: 'dianshi',
        热水器: 'reshuiqi',
        宽带: 'wifi',
        沙发: 'haofangtuo400iconfont2shafa'
      }
    }
  },
  async created () {
    const id = this.$route.params.id
    console.log(id)
    const data = await houseInfo(id)
    this.info = data.body
    console.log(this.info)

    const msg = await getCollect(id)
    console.log(msg)
    this.flag = msg.body.isFavorite

    const msgs = await delCollect(id)
    console.log(msgs)
  },
  methods: {
    async toggleCollect () {
      console.log(this.info.houseCode)
      this.flag = !this.flag
      const data = await getDetailCollect(this.info.houseCode)
      console.log(data)
      if (this.flag) {
        this.$toast.success('已添加至收藏')
      } else {
        this.$toast.fail('已取消收藏')
      }
    }
  }
}
</script>

<style scoped lang="less">
* {
  margin: 0;
  padding: 0;
}
body {
  background-color: #4343a1;
}

.my-swipe .van-swipe-item {
  color: #39becd;
  font-size: 12px;
  line-height: 150px;
  text-align: center;
  background-color: #e1f5f8;
  height: 250px;
}
.detail-info {
  height: 260px;
  margin: 0 10px;
  .info-top {
    height: 90px;
    padding: 5px 0;
    h3 {
      font-size: 16px;
      font-weight: normal;
      color: #333;
      padding: 8px 0;
      margin: 10px 0;
    }
    .distance {
      width: 50px;
      height: 25px;
      font-size: 12px;
      background-color: #e1f5f8;
      border-radius: 3px;
      color: #39becd;
      text-align: center;
      line-height: 25px;
    }
  }
  .info-content {
    height: 90px;
    border-bottom: 1px solid #cecece;
    border-top: 1px solid #cecece;
    ul {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 90px;
      li {
        flex: 1;
        text-align: center;
        font-size: 14px;
        color: #999;
        .info-price {
          font-size: 18px;
          color: #fa5741;
          font-weight: bolder;
          margin: 5px 0;
          span {
            font-size: 12px;
            font-weight: normal;
          }
        }
      }
    }
  }
  .info-bottom {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    height: 80px;
    font-size: 13px;
    div {
      width: 50%;
      color: #999;
      margin-bottom: 8px;
      span {
        color: #333;
      }
    }
  }
}
.detail-box {
  background-color: #f5f5f9;
  height: 335px;
  padding-top: 10px;
  .detail-desc {
    width: 100%;
    padding: 0 10px;
    background-color: #fff;
    .desc-title {
      height: 45px;
      line-height: 45px;
      color: #666;
      font-size: 14px;
      span {
        color: #333;
      }
    }
    .titles {
      font-size: 15px;
      color: #333;
      font-weight: 600;
      border-bottom: 1px solid #cecece;
    }
    .detail-map {
      height: 145px;
      background-color: bisque;
    }
    .grids {
      height: 90px;
      margin-left: -10px;
      margin-right: 10px;
      p {
        font-size: 14px;
        color: #333;
        margin-top: 5px;
      }
    }
  }
}

.detail-serv {
  margin: 0 10px;
  .desc-title {
    height: 45px;
    line-height: 45px;
    font-size: 15px;
    color: #333;
    font-weight: 600;
    border-bottom: 1px solid #cecece;
  }
  .detail-cell {
    height: 100px;
    display: flex;
    align-items: center;
    .head {
      display: flex;
      img {
        width: 52px;
        height: 52px;
        margin-right: 10px;
      }
      .con {
        color: #333;
        div {
          font-size: 12px;
          color: #fa5741;
        }
      }
    }
    .btn {
      width: 72px;
      height: 30px;
    }
  }
  .detail-text {
    width: 100%;
    height: 125px;
    line-height: 1.6;
    color: #333;
    font-size: 14px;
  }
}
.bgc {
  height: 10px;
  background-color: #f5f5f9;
}
.detail-like {
  height: 440px;
  margin: 0 10px;
  .desc-title {
    height: 45px;
    line-height: 45px;
    font-size: 15px;
    color: #333;
    font-weight: 600;
    border-bottom: 1px solid #cecece;
  }
  .findList {
    ul {
      width: 100%;
      li {
        height: 100px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #ccc;
        padding: 15px;
        .imgs {
          width: 106px;
          height: 80px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .list-content {
          flex: 1;
          height: 90px;
          margin-left: 10px;
          font-size: 12px;
          h3 {
            font-size: 15px;
            color: #394043;
          }
          .adress {
            color: #afb2b3;
            margin: 5px 0;
          }
          .distance {
            width: 50px;
            height: 25px;
            background-color: #e1f5f8;
            border-radius: 3px;
            color: #39becd;
            text-align: center;
            line-height: 25px;
            margin-bottom: 5px;
          }
          .housePrice {
            font-size: 12px;
            color: #fa5741;
            span {
              font-size: 16px;
              font-weight: bolder;
            }
          }
        }
      }
      .list-border {
        border: none;
      }
    }
  }
}
.bottom-serc {
  width: 100%;
  // height: 50px;
  border-top: 1px solid #e8e8e9;
  border-bottom: 1px solid #e8e8e9;
  display: flex;
  align-items: center;
  font-size: 17px;
  color: #999;
  background-color: #fff;
  position: sticky;
  bottom: 0;
  .bottom-sc {
    flex: 1;
    text-align: center;
    border-right: 1px solid #e8e8e9;
    line-height: 50px;
  }
  .stars {
    display: flex;
    align-items: center;
    justify-content: center;
    p {
      margin-left: 5px;
    }
  }
  .tels {
    background-color: #21b97a;
    color: #fff;
  }
}
</style>
